<template>
	<view>
		<scroll-view class="content-box" scroll-y @scrolltolower="loadMore">
			<view class="message-item row-column-center" v-for="item,index in messageList" :key="index" @click="toMessageDetail(item)">
				<view class="icnon-image row-center">
					<u-icon name="volume" color="#606FFE" size="45rpx"></u-icon>
				</view>
				<view>
					<view class="message-title">货运消息<text v-if="item.isRead == 0" class="message-tip"></text></view>
					<view class="message-info ellipsis-text">{{item.content}}</view>
				</view>
				
			</view>
			<view v-if="isAllData != '0'">
				<view class="loading" v-if="isAllData == '1'">
				  正在加载，请稍候
				  <uni-icons type="spinner-cycle" size="16" style="margin-left: 4px;"></uni-icons>
				</view>
				<view class="all-data" v-else>已加载全部数据~</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import UserCenter from "@/api/userCenter.js"
	export default {
		data() {
			return {
				messageList: [],
				total: 0,
				pageInfo: {
					pageSize: 10,
					pageNum: 1
				},
				isAllData: '0'
			}
		},
		async onLoad() {
			
		},
		onShow() {
			this.messageList = [];
			this.total = 0;
			this.pageInfo = {
				pageSize: 10,
				pageNum: 1
			}
			this.getMessageList();
		},
		methods: {
			async getMessageList() {
				this.isAllData = '1';
				let res = await UserCenter.getMessageList(this.pageInfo);
				this.messageList.push(...res.rows);
				this.total = res.total;
				let {pageNum, pageSize} = this.pageInfo;
				if(pageNum  >= this.total / pageSize) {
					this.isAllData = '2';
				} else {
					this.isAllData = '0';
				}
				console.log(this.isAllData)
			},
			loadMore() {
				let {pageNum, pageSize} = this.pageInfo;
				if(pageNum  >= this.total / pageSize) {
					this.isAllData = '2';
					return;
				}
				this.$set(this.pageInfo, 'pageNum', pageNum+1);
				this.getMessageList();
			},
			toMessageDetail(item) {
				// 1 找车   2找货
				let {workType, carDemandId, goodDemandId} = item;
				let id = carDemandId;
				if(workType == 2) {
					id = goodDemandId;
				}
				UserCenter.toMessageDetail({id: item.id}).then(res => {
					let url = "/subPages/transport/detail/findCar?id=" + id + "&type=1";
					if(workType == 2) {
						url = "/subPages/transport/detail/findGoods?id=" + id + "&type=1";
					}
					uni.navigateTo({
						url
					})
				});
			}
		}
		
		
	}
</script>

<style lang="less">
	.loading,
	.all-data {
		display: flex;
		justify-content: center;
		align-items: center;
		color: #999;
		padding: 15rpx 0;
	}
	.content-box {
		height: 100vh;
		background: #fff;
		padding: 0 28rpx;
	}
	.message-item {
		margin-top: 40rpx;
		.icnon-image {
			width: 90rpx;
			height: 90rpx;
			border-radius: 45rpx;
			background: #E0E3FF;
			margin-right: 20rpx;
		}
		.message-title {
			font-size: 28rpx;
			font-weight: 500;
			color: #1a1a1a;
			margin-bottom: 8rpx;
			width: auto;
			.message-tip {
				display: inline-block;
				width: 12rpx;
				height: 12rpx;
				background: #FF3C24;
				z-index: 99;
				border-radius: 12rpx;
				vertical-align: text-top;
				margin-left: 8rpx;
			}
		}
		.message-info {
			font-size: 24rpx;
			color: #999;
			flex: 1;
			max-width: 570rpx;
		}
	}
</style>